<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style type="text/css">
    /* 宽度高度一样布局*/
    .angel-view .parent-cwh-container {
        width: 100%;
        padding-top: 100%;
        position: relative;
    }

    .angel-view .children-cwh-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    /* 容器样式 */
    .page-content {
        margin: 24px 36px 0 36px;
        width: calc(100% - 72px);
    }

    table.member-info tr td {
        text-align: center;
        width: calc(100% / 6)
    }

    table.member-info tr:first-child td:last-child div {
        margin: 8px 0 8px 0;
    }

    /* 第一部分样式 */
    table.member-info .angel-view {
        margin: 16px 25% 0 25%;
    }

    table.member-info .angel-view .head-img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
    }

    table.member-info div.phone {
        margin: 16px 0 16px 0;

    }

    table.member-info .remainAmount {
        font-weight: bold;
        font-size: 18px;
        color: #FF6666;
    }

    table.member-info .contractAmount {
        color: silver;
    }

    /*第一部分样式*/
    table.list-record tr th,
    table.list-record tr td {
        width: calc(100% / 8);
        text-align: center;
    }

    table.list-record tr td:last-child {
        background-color: white !important;
    }

    table.list-record .pagination-detail .page-list {
        display: none;
    }
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="page-content">
        <table class="member-info table table-bordered">
            <tr>
                <td rowspan="4">
                    <div class="angel-view">
                        <div class="parent-cwh-container">
                            <div class="children-cwh-container">
                                <img class="head-img img-circle" th:src="*{member.logo}" alt="头像">
                            </div>
                        </div>
                    </div>
                    <div class="phone"><span th:text="*{member.mobile}"></span></div>
                </td>
                <td><span>用户ID</span></td>
                <td><span th:text="*{member.id}"></span></td>
                <td><span>首次登录时间</span></td>
                <td><span th:text="*{member.firstLoginDate}"></span></td>
                <td rowspan="4">
                    <div><span>可借金额</span></div>
                    <div><span class="remainAmount" th:text="*{remainAmount!=null?('￥'+remainAmount):('￥0')}"></span>
                    </div>
                    <div><span>总额度</span></div>
                    <div><span class="contractAmount"
                               th:text="*{contractAmount!=null?('￥'+contractAmount):('￥0')}"></span></div>
                </td>
            </tr>
            <tr>
                <td><span>姓名</span></td>
                <td><span th:text="*{member.name}"></span></td>
                <td><span>最近登录时间</span></td>
                <td><span th:text="*{member.latelyLoginDate}"></span></td>
            </tr>
            <tr>
                <td><span>性别</span></td>
                <td><span th:text="*{member.sex == 2?'女':'男' }"></span></td>
                <td><span>登录次数</span></td>
                <td><span th:text="*{member.loginCount}"></span></td>
            </tr>
            <tr>
                <td><span>出生年月</span></td>
                <td><span th:text="*{member.barthDate}"></span></td>
                <td><span>是否为贷款用户</span></td>
                <td><span th:text="*{member.whetherLoanUser==2?'是':'否'}"></span></td>
            </tr>
        </table>
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab">借款记录</a></li>
            <li><a href="#ios" data-toggle="tab">还款记录</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <table id="loan-list-table" class="table table-bordered list-record"></table>
            </div>
            <div class="tab-pane fade" id="ios">
                <table id="payment-list-table" class="table table-bordered list-record"></table>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">

    $('#loan-list-table').bootstrapTable({
        //请求方法
        method: 'POST',
        //类型json
        dataType: 'JSON',
        //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
        url: ctx + "beautyflower/order/list?memberId=" + [[${member.id}]],
        //bootstrap table post提交数据,后台无法接收的问题
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        //显示刷新按钮
        showRefresh: false,
        //显示切换手机试图按钮
        showToggle: false,
        //显示 内容列下拉框
        showColumns: false,
        //显示到处按钮
        showExport: false,
        //显示切换分页按钮
        showPaginationSwitch: false,
        //是否单选
        singleSelect: false,
        //最低显示2行
        minimumCountColumns: 2,
        //是否显示行间隔色
        striped: true,
        //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        cache: false,
        //是否显示分页（*）
        pagination: true,
        //排序方式
        sortOrder: 'asc',
        //初始化加载第一页，默认第一页
        pageNumber: 1,
        //每页的记录行数（*）
        pageSize: 10,
        //可供选择的每页的行数（*）
        pageList: [10, 25, 50, 100],
        //分页方式：client客户端分页，server服务端分页（*）
        sidePagination: 'server',
        //pc端 按右键弹出菜单
        contextMenuTrigger: 'right',
        //手机端 弹出菜单，click：单击， press：长按。
        contextMenuTriggerMobile: 'press',
        //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
        //queryParamsType:'',
        //后台返回的数据格式和bootstrap-table默认的格式不同
        responseHandler: function (res) {
            return res;
            //return {
            // 'total': res.data.total,//总页数
            // 'rows': res.data.rows   //数据
            //};
        },
        //查询参数,每次调用是会带上这个参数
        queryParams: function (params) {
            var searchParam = {};
            searchParam.pageNum = params.limit === undefined ? "1" : params.offset / params.limit + 1;
            searchParam.pageSize = params.limit === undefined ? -1 : params.limit;
            searchParam.orderBy = params.sort === undefined ? "" : params.sort + " " + params.order;
            return searchParam;
        },
        onClickRow: function (row, $el) {

        },
        onCheck: function (row, $el) {

        },
        columns: [
            {
                field: 'orderTime',
                title: '借款时间'
            },
            {
                field: 'loanAmount',
                title: '借款金额'
            },
            {
                field: 'purpose',
                title: '用途'
            },
            {
                field: 'orderPeriods',
                title: '分期月数'
            },
            {
                field: 'bankName',
                title: '收款账户',
                formatter: function (value, row, index) {
                    if (row.bankName && row.bankCardNumber && row.bankCardNumber.length > 4) {
                        return row.bankName + '尾号' + row.bankCardNumber.substr(-4);
                    }
                    return '';
                }
            },
            {
                field: 'plan',
                title: '还款计划',
                align: 'center',
                formatter: function (value, row, index) {
                    return '<a href="#" onclick="planDetails(\'' + row.orderNumber + '\',\'' + row.orderPeriods + '\')">计划详情</a>';
                }
            },
            {
                field: 'options',
                title: '操作',
                align: 'center',
                formatter: function (value, row, index) {
                    return '<a href="#" onclick="loanDetails(\'' + row.id + '\')" style="margin-left: 12px">借款详情</a> ';
                }
            },
            {
                field: 'totalMoney',
                title: '借款总额',
                align: 'center',
                formatter: function (value, row, index) {
                    return '<span style="font-size:20px;color:#FF6666;font-weight: bold;">￥' + [[${loanTotal != null ? loanTotal : 0}]] + '</span>';
                }
            }
        ],
        onLoadSuccess: function (data) {
            $('#loan-list-table').bootstrapTable('mergeCells', {
                index: 0,
                field: 'totalMoney',
                rowspan: data.rows ? data.rows.length : 0
            });
        }
    });

    $('#payment-list-table').bootstrapTable({
        //请求方法
        method: 'POST',
        //类型json
        dataType: 'JSON',
        //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
        url: ctx + "beautyflower/paymentHistory/list?memberId=" + [[${member.id}]],
        //bootstrap table post提交数据,后台无法接收的问题
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        //显示刷新按钮
        showRefresh: false,
        //显示切换手机试图按钮
        showToggle: false,
        //显示 内容列下拉框
        showColumns: false,
        //显示到处按钮
        showExport: false,
        //显示切换分页按钮
        showPaginationSwitch: false,
        //是否单选
        singleSelect: false,
        //最低显示2行
        minimumCountColumns: 2,
        //是否显示行间隔色
        striped: true,
        //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        cache: false,
        //是否显示分页（*）
        pagination: true,
        //排序方式
        sortOrder: 'asc',
        //初始化加载第一页，默认第一页
        pageNumber: 1,
        //每页的记录行数（*）
        pageSize: 10,
        //可供选择的每页的行数（*）
        pageList: [10, 25, 50, 100],
        //分页方式：client客户端分页，server服务端分页（*）
        sidePagination: 'server',
        //pc端 按右键弹出菜单
        contextMenuTrigger: 'right',
        //手机端 弹出菜单，click：单击， press：长按。
        contextMenuTriggerMobile: 'press',
        //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
        //queryParamsType:'',
        //后台返回的数据格式和bootstrap-table默认的格式不同
        responseHandler: function (res) {
            return res;
            //return {
            // 'total': res.data.total,//总页数
            // 'rows': res.data.rows   //数据
            //};
        },
        //查询参数,每次调用是会带上这个参数
        queryParams: function (params) {
            var searchParam = {};
            searchParam.pageNum = params.limit === undefined ? "1" : params.offset / params.limit + 1;
            searchParam.pageSize = params.limit === undefined ? -1 : params.limit;
            searchParam.orderBy = params.sort === undefined ? "" : params.sort + " " + params.order;
            return searchParam;
        },
        onClickRow: function (row, $el) {

        },
        onCheck: function (row, $el) {

        },
        columns: [
            {
                field: 'repaymentTime',
                title: '还款时间'
            },
            {
                field: 'repaymentPrincipalAmount',
                title: '还款金额',
                formatter: function (value, row, index) {
                    var principal = row.repaymentPrincipalAmount ? row.repaymentPrincipalAmount : '0';
                    var interest = row.repaymentInterestAmount ? row.repaymentInterestAmount : '0';
                    return parseFloat((parseFloat(principal) + parseFloat(interest)).toFixed(2));
                }
            },
            {
                field: 'status',
                title: '还款状态',
                formatter: function (value, row, index) {
                    return {
                        TO_HOLD: '等待调用代扣',
                        ONGOING: '扣款进行中',
                        SUCCESS: '扣款成功',
                        FAILURE: '扣款失败',
                        REFUND: '转账退款'
                    }[value];
                }
            },
            {
                field: 'installmentNo',
                title: '还款期数'
            },
            {
                field: 'bankName',
                title: '还款账户',
                formatter: function (value, row, index) {
                    if (row.bankName && row.bankCardNumber && row.bankCardNumber.length > 4) {
                        return row.bankName + '尾号' + row.bankCardNumber.substr(-4);
                    }
                    return '';
                }
            },
            {
                field: 'options',
                title: '操作',
                align: 'center',
                formatter: function (value, row, index) {
                    return '<a href="#" onclick="paymentDetails(\'' + row.id + '\')" style="margin-left: 12px">还款详情</a> ';
                }
            },
            {
                field: 'totalMoney',
                title: '还款总额',
                align: 'center',
                formatter: function (value, row, index) {
                    return '<span style="font-size:20px;color:#FF6666;font-weight: bold;">￥' + [[${paymentTotal != null ? paymentTotal : 0}]] + '</span>';
                }
            }
        ],
        onLoadSuccess: function (data) {
            $('#payment-list-table').bootstrapTable('mergeCells', {
                index: 0,
                field: 'totalMoney',
                rowspan: data.rows ? data.rows.length : 0
            });
        }
    });

    /*计划详情*/
    function planDetails(orderNumber, orderPeriods) {
        $.modal.open('计划详情', ctx + 'beautyflower/repaymentPlan/plandetails?orderNumber=' + orderNumber + '&orderPeriods=' + orderPeriods);
    }

    /*借款详情*/
    function loanDetails(id) {
        $.modal.open('借款详情', ctx + 'beautyflower/order/loandetails/' + id);
    }

    /*还款详情*/
    function paymentDetails(id) {
        $.modal.open('还款详情', ctx + 'beautyflower/paymentHistory/paymentdetails/' + id);
    }
</script>
</body>
</html>
